<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
		<title>مولد نصوص المعاينة - إضافيات</title>
		<link rel="shortcut icon" href="images/meeeeeee.png" />
		<!-- link type="text/css" href="css/ui-custom-theme.css" rel="stylesheet" / -->
		<link type="text/css" href="css/style.css" rel="stylesheet" />
		<!-- script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript" src="js/lipsum-v1.js"></script -->
	</head>

	<body>
	
	<div id="extras-container">
	<style type="text/css">
		#extras-container {
			margin:50px;
			text-align:left;
		}
		textarea.extra {
			display:block;
			width:99%;
			height:200px;
			margin:10px auto 20px;
			border:1px solid #bbb;
			padding:2px 3px;
		}
	</style>

<h2>Test Page #1</h2>
<textarea class="extra" spellcheck="false" onclick="this.focus();this.select();">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;Test Page&lt;/title&gt;
        &lt;style type="text/css"&gt;&lt;/style&gt;
        &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
        &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;

        &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;

    &lt;/body&gt;
&lt;/html&gt;</textarea>

<h2>Test Page #2</h2>
<textarea class="extra" spellcheck="false" onclick="this.focus();this.select();">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;Test Page&lt;/title&gt;
        &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
        &lt;style type="text/css"&gt;
        * {
          margin:0;
          padding:0;
        }

        .clear {
          clear:both;
        }

        ul,ol {
          margin:0 0 0 30px;
        }

        header {
          padding:1%;
          background-color:black;
          color:white;
        }

        nav {
          padding:0.5%;
          background-color:blue;
        }

        nav ul {
          margin:0 0;
          padding:0 0;
          overflow:hidden;
        }

        nav li {
          list-style:none;
          float:left;
          display:inline;
        }

        nav a {
          display:block;
          color:white;
          text-decoration:none;
          padding:0 10px;
        }

        article,aside {
          background-color:#ccc;
          padding:1%;
          height:300px;
        }

        article {
          background-color:white;
          float:left;
          width:68%;
        }

        aside {
          float:right;
          width:28%;
        }

        footer {
          clear:both;
          padding:1%;
          background-color:#bbb;
        }

        @media screen and (max-width:600px) {
          article,
          aside {
            display:block;
            float:none;
            width:auto;
            height:auto;
            padding:10%;
          }
        }
        &lt;/style&gt;
        &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="page-wrap"&gt;
            &lt;header&gt;
                &lt;h1&gt;&lt;a href="/"&gt;Lorem Ipsum&lt;/a&gt;&lt;/h1&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
            &lt;/header&gt;
            &lt;nav&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/nav&gt;
            &lt;article&gt;
                &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
            &lt;/article&gt;
            &lt;aside&gt;
                &lt;h2&gt;Sidebar Widget&lt;/h2&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Lorem 1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Lorem 2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Lorem 3&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Lorem 4&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/aside&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
            &lt;footer&gt;Copyright &amp;#169; 2011 - &lt;a href="/"&gt;Lorem Ipsum&lt;/a&gt;&lt;/footer&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</textarea>

<h2>Simple Navigation</h2>
<textarea class="extra" spellcheck="false" onclick="this.focus();this.select();">&lt;nav id="nav"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Archive&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;</textarea>

<h2>Multilevel Navigation</h2>
<textarea class="extra" spellcheck="false" onclick="this.focus();this.select();">&lt;nav id="nav"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Archive&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;2009&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;2010&lt;/a&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;January&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;February&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;March&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;April&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;May&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;June&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;July&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;August&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;September&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;October&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;November&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;December&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;2011&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;2012&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;</textarea>

<h2>Tabs #1</h2>
<textarea class="extra" spellcheck="false" onclick="this.focus();this.select();">&lt;div class="tab"&gt;
    &lt;ul class="tab-wrapper"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Tab 4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="tab-content"&gt;
        &lt;div class="content"&gt;Content 1&lt;/div&gt;
        &lt;div class="content"&gt;Content 2&lt;/div&gt;
        &lt;div class="content"&gt;Content 3&lt;/div&gt;
        &lt;div class="content"&gt;Content 4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</textarea>

<h2>Tabs #2</h2>
<textarea class="extra" spellcheck="false" onclick="this.focus();this.select();">&lt;div id="tab"&gt;
    &lt;ul id="tab-wrapper"&gt;
        &lt;li&gt;&lt;a href="#tab-content-1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab-content-2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab-content-3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab-content-4"&gt;Tab 4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="tab-content"&gt;
        &lt;div id="tab-content-1" class="tab-content"&gt;Content 1&lt;/div&gt;
        &lt;div id="tab-content-2" class="tab-content"&gt;Content 2&lt;/div&gt;
        &lt;div id="tab-content-3" class="tab-content"&gt;Content 3&lt;/div&gt;
        &lt;div id="tab-content-4" class="tab-content"&gt;Content 4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</textarea>

<h2>Accordion #1</h2>
<textarea class="extra" spellcheck="false" onclick="this.focus();this.select();">&lt;div class="accordion"&gt;
    &lt;h2&gt;Accordion Header 1&lt;/h2&gt;
    &lt;div class="accordion-content"&gt;Content 1&lt;/div&gt;
    &lt;h2&gt;Accordion Header 2&lt;/h2&gt;
    &lt;div class="accordion-content"&gt;Content 2&lt;/div&gt;
    &lt;h2&gt;Accordion Header 3&lt;/h2&gt;
    &lt;div class="accordion-content"&gt;Content 3&lt;/div&gt;
    &lt;h2&gt;Accordion Header 4&lt;/h2&gt;
    &lt;div class="accordion-content"&gt;Content 4&lt;/div&gt;
&lt;/div&gt;</textarea>

<h2>Accordion #2</h2>
<textarea class="extra" spellcheck="false" onclick="this.focus();this.select();">&lt;div id="accordion"&gt;
    &lt;h2&gt;&lt;a href="#acc1"&gt;Accordion Header 1&lt;/a&gt;&lt;/h2&gt;
    &lt;div id="acc1" class="accordion-content"&gt;Content 1&lt;/div&gt;
    &lt;h2&gt;&lt;a href="#acc2"&gt;Accordion Header 2&lt;/a&gt;&lt;/h2&gt;
    &lt;div id="acc2" class="accordion-content"&gt;Content 2&lt;/div&gt;
    &lt;h2&gt;&lt;a href="#acc3"&gt;Accordion Header 3&lt;/a&gt;&lt;/h2&gt;
    &lt;div id="acc3" class="accordion-content"&gt;Content 3&lt;/div&gt;
    &lt;h2&gt;&lt;a href="#acc4"&gt;Accordion Header 4&lt;/a&gt;&lt;/h2&gt;
    &lt;div id="acc4" class="accordion-content"&gt;Content 4&lt;/div&gt;
&lt;/div&gt;</textarea>

<h2>Select Boxes</h2>
<textarea class="extra" spellcheck="false" onclick="this.focus();this.select();">&lt;select&gt;
    &lt;option selected="true"&gt;Select...&lt;/option&gt;
    &lt;option value="lorem"&gt;Lorem&lt;/option&gt;
    &lt;option value="ipsum"&gt;Ipsum&lt;/option&gt;
    &lt;option value="dolor"&gt;Dolor&lt;/option&gt;
    &lt;option value="sit"&gt;Sit&lt;/option&gt;
    &lt;option value="amet"&gt;Amet&lt;/option&gt;
    &lt;option disabled="true"&gt;Disabled&lt;/option&gt;
&lt;/select&gt;</textarea>
		<div class="footer ui-widget-header remove">&#169; 1 جوان 2014، القيروان - تونس :تعريب: <a href="https://plus.google.com/+EmadAdelGeek/" target="_blank">عماد عادل</a></div>
	</div>
	</body>
</html>


